<template>
    <div>
        <h1>Phone</h1>
        <p>msg：{{ msg }}</p>
        <input
            type="text"
            v-model="pad"
            @keyup.enter="changePad"
            placeholder="修改平板MSG，输入完按回车"
        />
    </div>
</template>

<script>
export default {
    name: "Phone",
    data() {
        return {
            msg: "我是Phone",
            pad: "",
        };
    },
    // 向全局事件总线中注册自定义事件以及回调函数
    mounted() {
        this.$bus.$on("modPhone", (data) => {
            console.log("卧槽，我是Phone，我的信息被改了");
            this.msg = data;
        });
    },
    // 调用别的组件注册的自定义事件，谁调用了自定义事件，this就是谁
    methods: {
        changePad() {
            this.$bus.$emit("modPad", this.pad);
        },
    },
    // 及时解绑自定义事件
    beforeDestroy() {
        this.$bus.$off("modPhone");
    },
};
</script>

<style></style>
